import React, { useEffect, useState } from "react";

import Icon from "../../components/icon";

import "./svg.scss";

import svgImg from "./svg.svg";

import cui from "@/imgAnimate/锤.png";
import dimian from "@/imgAnimate/地面.png";
import dimianchang from "@/imgAnimate/地面长.png";
import diaoche1 from "@/imgAnimate/吊车1.png";
import diaoche2 from "@/imgAnimate/吊车2.png";
import diaogou from "@/imgAnimate/吊勾.png";
import diaogousheng from "@/imgAnimate/吊勾绳.png";
import diaosheng1 from "@/imgAnimate/吊绳1.png";
import diaosheng2 from "@/imgAnimate/吊绳2.png";
import gangguan from "@/imgAnimate/钢管.png";
import gangjinlong from "@/imgAnimate/钢筋笼.png";
import kong from "@/imgAnimate/孔.png";
import loudou from "@/imgAnimate/漏斗.png";
import shuini from "@/imgAnimate/水泥.png";
import shuiniche from "@/imgAnimate/水泥车.png";

let currentImgIndex = 0;

const SVG = (): JSX.Element => {
  // const [img, setImg] = useState(undefined);

  useEffect(() => {
    setTimeout(() => {
      const SVGstrokeLength: any = document.getElementsByClassName("logo")[0];
      console.log(SVGstrokeLength.getTotalLength()); // 获取svg的path画图长度
    }, 1000);

    // setInterval(async () => {
    //   const currentImg = await import(
    //     `../../img/合成 1_${currentImgIndex.toString().padStart(5, "0")}.png`
    //   );
    //   setImg(currentImg.default);
    //   currentImgIndex = currentImgIndex === 324 ? 0 : currentImgIndex + 1;
    // }, 12000 / 325);
  }, []);
  return (
    <div>
      <svg
        width="200"
        height="200"
        viewBox="0 0 200 200"
        className="logoBox"
        preserveAspectRatio="xMidYMid meet"
      >
        <defs>
          <g id="more">
            <line
              x1="40"
              y1="25"
              x2="90"
              y2="25"
              strokeWidth="8"
              stroke="currentColor"
            ></line>
            <line
              x1="40"
              y1="50"
              x2="80"
              y2="50"
              strokeWidth="8"
              stroke="currentColor"
            ></line>
            <line
              x1="40"
              y1="75"
              x2="90"
              y2="75"
              strokeWidth="8"
              stroke="currentColor"
            ></line>
            <circle r="5" cx="20" cy="25" fill="currentColor"></circle>
            <circle r="5" cx="20" cy="50" fill="currentColor"></circle>
            <circle r="5" cx="20" cy="75" fill="currentColor"></circle>
          </g>
          <symbol id="more1" viewBox="0 0 100 100">
            <line
              x1="40"
              y1="25"
              x2="90"
              y2="25"
              strokeWidth="8"
              stroke="currentColor"
            ></line>
            <line
              x1="40"
              y1="50"
              x2="80"
              y2="50"
              strokeWidth="8"
              stroke="currentColor"
            ></line>
            <line
              x1="40"
              y1="75"
              x2="90"
              y2="75"
              strokeWidth="8"
              stroke="currentColor"
            ></line>
            <circle r="5" cx="20" cy="25" fill="currentColor"></circle>
            <circle r="5" cx="20" cy="50" fill="currentColor"></circle>
            <circle r="5" cx="20" cy="75" fill="currentColor"></circle>
          </symbol>
          <symbol id="filledArrowRight" viewBox="0 0 100 100">
            <polyline
              points="20 10, 80 50, 20 90"
              fill="currentColor"
            ></polyline>
          </symbol>
          <symbol id="arrowRight" viewBox="0 0 100 100">
            <polyline
              points="20 10, 60 50, 20 90"
              fill="transparent"
              strokeWidth="6"
              stroke="currentColor"
            ></polyline>
          </symbol>
          <symbol id="animateSVG" viewBox="0 0 100 100">
            <rect
              x="0"
              y="0"
              transform="translate(20, 20) rotate(20) skewY(30) scale(0.3)"
              width="50"
              height="50"
              fill="currentColor"
            ></rect>
          </symbol>

          <linearGradient id="linearGradient">
            <stop offset="0" stopColor="red"></stop>
            <stop offset="50%" stopColor="green" stopOpacity="0.5"></stop>
            <stop offset="100%" stopColor="blue"></stop>
          </linearGradient>
          <radialGradient
            r="50%"
            cx="50%"
            cy="50%"
            fx="50%"
            fy="50%"
            id="radialGradient"
          >
            <stop offset="0" stopColor="red"></stop>
            <stop offset="50%" stopColor="green" stopOpacity="0.5"></stop>
            <stop offset="100%" stopColor="blue"></stop>
          </radialGradient>
          <symbol id="linearGradientBox" viewBox="0 0 100 100">
            <rect
              x="0"
              y="0"
              height="100"
              width="100"
              fill="url(#radialGradient)"
            ></rect>
          </symbol>
          <symbol id="loading" viewBox="0 0 200 200" fill="none">
            <circle
              cx="100"
              cy="100"
              // stroke="red"
              strokeWidth="10"
              r="90"
              strokeDasharray="142"
              strokeLinecap="round"
            >
              <animateTransform
                attributeName="transform"
                type="rotate"
                from="0 100 100"
                to="360 100 100"
                dur="1.5s"
                repeatCount="indefinite"
              ></animateTransform>
              <animate
                attributeName="stroke"
                values="red;blue;red"
                dur="1.5s"
                repeatCount="indefinite"
              ></animate>
            </circle>
            <circle
              cx="100"
              cy="100"
              // stroke="blue"
              strokeWidth="10"
              r="60"
              strokeDasharray="94"
              strokeLinecap="round"
            >
              <animateTransform
                attributeName="transform"
                type="rotate"
                values="360 100 100;0 100 100"
                dur="1.5s"
                repeatCount="indefinite"
              ></animateTransform>
              <animate
                attributeName="stroke"
                values="blue;red;blue"
                dur="1.5s"
                repeatCount="indefinite"
              ></animate>
            </circle>
          </symbol>
        </defs>
        <g viewBox="0 0 100 100">
          <circle
            cx="50"
            cy="50"
            r="45"
            strokeWidth="5"
            stroke="#fff"
            fill="transparent"
          ></circle>
          <circle
            className="SVG_circle"
            cx="50"
            cy="50"
            r="45"
            strokeWidth="5"
            stroke="green"
            fill="transparent"
          ></circle>
        </g>
        <g viewBox="0 0 100 100">
          {" "}
          {/*描边*/}
          <line
            y1="45"
            x1="10"
            x2="90"
            y2="45"
            className="logo"
            stroke="red"
            strokeWidth="10"
          ></line>
        </g>
        <svg viewBox="-50 0 100 100">
          <rect x="0" y="0" height="50" width="50" fill="red">
            {/* @ts-ignore */}
            <set attributeName="x" attributeType="XML" to="20" begin="1s" />
            {/* @ts-ignore */}
            <set attributeName="x" attributeType="XML" to="20" begin="2s" />
            {/* @ts-ignore */}
            <set
              attributeName="fill"
              attributeType="XML"
              to="blue"
              begin="3s"
            />
          </rect>
        </svg>
        <svg viewBox="-50 -50 100 100">
          <circle cx="0" cy="0" r="24" stroke="red" strokeWidth="1" fill="blue">
            <animate
              attributeName="cx"
              attributeType="XML"
              from="0"
              to="25"
              repeatCount="2"
              dur="2s"
              fill="freeze"
            ></animate>
            <animate
              attributeName="cy"
              attributeType="XML"
              from="0"
              to="25"
              repeatCount="1"
              dur="2s"
              fill="freeze"
            ></animate>
            <animateTransform
              attributeName="transform"
              attributeType="XML"
              begin="0"
              from="1"
              to="2"
              dur="3s"
              type="scale"
              repeatCount="2"
            ></animateTransform>
          </circle>
        </svg>
        <svg viewBox="0 -50 100 100">
          <rect x="0" y="0" height="10" width="10" fill="red">
            <animateMotion
              id="forword"
              begin="0"
              dur="5s"
              rotate="0"
              fill="freeze"
              path="M10 10 L10 30 L30 30 L30 10 Z"
            ></animateMotion>
            <animateMotion
              id="back"
              begin="forword.end + 0.5s"
              dur="5s"
              rotate="0"
              fill="freeze"
              path="M30 10 L30 30 L10 30 L10 10 Z"
            ></animateMotion>
          </rect>
          {/* 下面的path标签可以不用 */}
          <path
            d="M10 10 L10 30 L30 30 L30 10 Z"
            fill="none"
            stroke="green"
          ></path>
        </svg>
      </svg>
      <span style={{ color: "green", display: "block" }}>
        <svg width="30" height="30" viewBox="0 0 100 100">
          <use href="#more"></use>
        </svg>
        <Icon style={{ width: 30, height: 30, color: "red" }} svgId="more1" />
        <Icon style={{ width: 30, height: 30 }} svgId="arrowRight" />
        <Icon style={{ width: 30, height: 30 }} svgId="filledArrowRight" />
        <Icon style={{ width: 100, height: 100 }} svgId="loading" />
        <Icon style={{ width: 100, height: 100 }} svgId="linearGradientBox" />
      </span>
      <svg width="30" height="30" viewBox="0 0 100 100">
        <svg width="100px" height="100px" viewBox="0 0 16 16">
          <title>基坑</title>
          <g
            id="桩基管理"
            stroke="none"
            stroke-width="1"
            fill="none"
            fill-rule="evenodd"
          >
            <g
              id="桩基管理-平面图备份"
              transform="translate(-104.000000, -112.000000)"
              fill-rule="nonzero"
            >
              <g id="left" transform="translate(88.000000, 60.000000)">
                <g id="基坑" transform="translate(16.000000, 52.000000)">
                  <rect
                    id="矩形"
                    fill="#000000"
                    opacity="0"
                    x="0"
                    y="0"
                    width="16"
                    height="16"
                  ></rect>
                  <path
                    d="M4.23529413,1.88235294 L4.39152941,3.29411764 L11.6084706,3.29411764 L11.7647059,1.88235294 L14.5882353,1.88235294 L14.5882353,14.1176471 L1.4117647,14.1176471 L1.4117647,1.88235294 L4.23529413,1.88235294 Z M3.39294117,2.82352941 L2.35294117,2.82352941 L2.35294117,13.1764706 L13.6470588,13.1764706 L13.6470588,2.82352941 L12.6061176,2.82352941 L11.6658824,11.2941176 L4.33411764,11.2941176 L3.39294117,2.82352941 Z M10.9807059,8.94117647 L5.01929413,8.94117647 L5.17647059,10.3529412 L10.8235294,10.3529412 L10.9807059,8.94117647 L10.9807059,8.94117647 Z M11.2423529,6.5882353 L4.75764706,6.5882353 L4.91482353,8 L11.0851765,8 L11.2423529,6.5882353 Z M11.504,4.23529412 L4.496,4.23529412 L4.65317647,5.64705883 L11.3468235,5.64705883 L11.504,4.23529412 L11.504,4.23529412 Z"
                    id="形状"
                    fill="#0D7EDB"
                  ></path>
                </g>
              </g>
            </g>
          </g>
        </svg>
      </svg>
      {/* <img src={img} alt="" /> */}
      <div className="animateBox">
        <img className="cui" src={cui} />
        <img className="dimian" src={dimian} />
        <img className="dimianchang" src={dimianchang} />
        <img className="diaoche1" src={diaoche1} />
        <img className="diaoche2" src={diaoche2} />
        <img className="diaogou" src={diaogou} />
        <img className="diaogousheng" src={diaogousheng} />
        <img className="diaosheng1" src={diaosheng1} />
        <img className="diaosheng2" src={diaosheng2} />
        <img className="gangguan" src={gangguan} />
        <img className="gangjinlong" src={gangjinlong} />
        <img className="kong" src={kong} />
        <img className="loudou" src={loudou} />
        <img className="shuini" src={shuini} />
        <img className="shuiniche" src={shuiniche} />
      </div>
    </div>
  );
};

export default SVG;
